<template>
  <div>
    <search-list
      ref="claimList"
      :api-url="$url.FilmApplyList"
      :option="searchOpt"
      :itemPerRow="6"
      :beforeQuery="beforeQuery"
    >
      <el-table-column prop="uid" label="用户ID"></el-table-column>
      <el-table-column prop="nickname" label="用户昵称"></el-table-column>
      <el-table-column prop="job" label="职务"></el-table-column>
      <el-table-column prop="identification" label="身份认证">
        <template slot-scope="scope">
          {{ $selectFormat['filmIdenSl'](scope.row.identification).label }}
        </template>
      </el-table-column>
      <el-table-column prop="filmTitle" label="认领作品"></el-table-column>
      <el-table-column prop="cover" label="作品封面" width="200px">
        <template slot-scope="scope">
          <div class="cover">
            <img :src="scope.row.cover" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="checked" label="状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['checkedSl'](scope.row.checked).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="最后操作人"></el-table-column>
      <el-table-column prop="updatedAt" label="最后更新时间"></el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
          <template v-if="scope.row.cover != null" style="display:flex">
            <el-button type="text" @click="pass(scope.row)" v-if="scope.row.checked == 0">
              审核通过
            </el-button>
            <el-button type="text" @click="noPass(scope.row)" v-if="scope.row.checked == 0">
              审核不通过
            </el-button>
          </template>
        </template>
      </el-table-column>
    </search-list>
    <el-dialog width="500px" title="填写审核不通过原因" :visible.sync="dialogShow" @close="clear">
      <el-form>
        <el-form-item label="原因">
          <el-input v-model.trim="reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="dialogClose">关 闭</el-button>
        <el-button type="success" @click="saveReason" icon="el-icon-check">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogShow: false,
        id: '',
        reason: '',
        searchOpt: [
          {
            type: 'checkedSl',
            name: 'checked',
            label: '状态',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'nickname',
            label: '用户昵称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'uid',
            label: '用户UUID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'filmTitle',
            label: '作品名称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'job',
            label: '职务名称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'updatedAt',
            label: '申请时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '审核开始时间',
              'end-placeholder': '审核结束时间',
            },
          },
        ],
      };
    },
    methods: {
      beforeQuery({ searchInfo }) {
        if (searchInfo.updatedAt === null) {
          searchInfo.startTime = '';
          searchInfo.endTime = '';
        } else {
          searchInfo.startTime = searchInfo.updatedAt[0];
          searchInfo.endTime = searchInfo.updatedAt[1];
        }
      },
      detail(row) {
        const { id } = row;
        this.$tabs.open({ name: 'ClaimDetail', params: { id } });
      },
      pass(row) {
        this.id = row.id;
        this.$service.FilmApplyPass({ id: this.id }).then((res) => {
          this.$message.success('操作成功');
          this.$refs.claimList.getList();
        });
      },

      noPass(row) {
        this.id = row.id;
        this.dialogShow = true;
      },
      saveReason() {
        if (this.reason == '') {
          this.$message.warning('请输入审核不通过原因');
          return;
        }
        this.$service
          .FilmApplyRefuse({
            id: this.id,
            reason: this.reason,
          })
          .then((res) => {
            this.dialogShow = false;
            this.$message.success('操作成功');
            this.$refs.claimList.getList();
          });
      },
      dialogClose() {
        this.dialogShow = false;
      },
      clear() {
        this.reason = '';
      },
    },
  };
</script>
<style lang="less" scoped>
  .cover {
    width: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
